<template>
  <div>
    <!-- <h1> H O M E </h1> -->

    <van-swipe
      :autoplay="1600"
      indicator-color="#aaa"
      class="home-swiper"
    >
      <van-swipe-item
        v-for="item in swiper_list"
        :key="item.imageFileLength"
        class="home-swiper-item"
      >
        <img :src="item.imageUrl">
      </van-swipe-item>
    </van-swipe>


    <input
      v-model="search_value"
      type="text"
      placeholder="根据城市名查大学"
      @keyup.enter="search"
    >


    <van-grid
      clickable
      :column-num="3"
    >
      <van-grid-item
        icon="newspaper-o"
        text="头条新闻"
        to="/home/news"
        clickable='true'
      />
      <van-grid-item
        icon="delete"
        text="垃圾分类"
        to="/home/garbage"
        
      />
      <van-grid-item
        icon="smile-o"
        text="笑话段子"
        to="/home/jokes"
      />
      <van-grid-item
        icon="logistics"
        text="物流查询"
        to="/home/logistics"
      />
      <van-grid-item
        icon="music-o"
        text="音 乐"
        to="/home/music"
      />
      <van-grid-item
        icon="bulb-o"
        text="天气查询"
        to="/home/weather"
      />
      <van-grid-item
        icon="idcard"
        text="身份查询"
        to="/home/identity"
      />
      <van-grid-item
        icon="shrink"
        text="预 留"
        to="/contact"
      />
      <van-grid-item
        icon="shrink"
        text="预 留"
        to="/contact"
      />
    </van-grid>


    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    />
  </div>
</template>

<script>

import Vue from 'vue';

import axios from '../axios.js';

import '@vant/touch-emulator';

// import store from '../store/index'

import {
  Swipe, SwipeItem, Grid, GridItem, Toast, PullRefresh,
} from 'vant';

Vue.use(Swipe).use(SwipeItem).use(Grid).use(GridItem)
  .use(Toast)
  .use(PullRefresh);

export default {

  data() {
    return {
      search_value: '',
      swiper_list: [],
      isLoading: false,
    };
  },
  created() {
    this.getSwiper();
    
  },
  mounted(){
    // this.touchGrid()
  },
  // store,
  methods: {
    search() {
      console.log('---------3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 ----------');
      if (this.search_value != '') {
        Toast(`您输入的内容是：${this.search_value}`);
        this.$store.state.search_value = this.search_value;
        this.search_value = '';
        this.$router.push('/home/college');
      } else {
        Toast('请输入内容，谢谢～～');
      }
    },
    tot() {
      Toast(' - 已点击 - ');
    },
    getSwiper() {
      this.$axios.get('/image/girl/list/random').then((res) => {
        this.swiper_list = res.data.data;
      });
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
      }, 500);
    }/* ,
    touchGrid(){
      console.log(this.$refs)
      this.$refs.touchme.addEventListener('click',function(){
            console.log('我被点击了一下～～～')
      })
    } */


  },

};
</script>

<style lang="less" scoped>


.home-swiper{
    width: 100%;
    height: 220px;
    .home-swiper-item{
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            display: block;
        }

    }
}

input[type="text"]{
        display: block;
        width: 90%;
        line-height: 30px;
        font-size: 15px;
        border-radius: 15px;
        border: 1px solid #ddd;
        margin: 16px auto;
        text-indent: 1em;
        color: #555;
        -webkit-appearance: none;
        &:focus{
            border-color: pink;
        }
    }

</style>
